<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="supplier-manage-detail">
    <div :class="{'is-mobile':showMobilePage}" :style="{minHeight: !isSupplier && 'calc(100vh - 120px)'}" class="supplier-info-content">
      <!-- 供应商信息 -->
      <SupplierDetailInfo :supplier-detail-info="baseInfo" :supplier-id="supplierId" :detail-type="detailType" :show-mobile-page="showMobilePage" :can-edit="canEditSupplierInfo" @edit="edit" />
      <div class="rel">
        <OtherInfo
          :supplier-id="supplierId"
          :parent-supplier-id="parentSupplierId"
          :form-data="otherData"
          :show-mobile-page="showMobilePage"
          :is-show-company="isShowCompany"
          :is-show-personal="isShowPersonal"
          @setSensitive="setSensitive"
          @download="handleDownload" />
        <!-- 签约（账号）信息 -->
        <SupplierAccountInfo
          v-if="!isModify"
          :supplier-id="supplierId"
          :parent-supplier-id="parentSupplierId"
          :is-show-sign-up="isShowSignUp"
          :supplier-detail-info="baseInfo"
          :accounts-info-list="baseInfo.accountsInfoList"
          :detail-type="detailType"
          :contract-code-view-status="contractCodeViewStatus"
          in-sub-tab
          @updateData="querySupplierDetail"
          @setSensitive="setSensitive" />
        <!-- 收款账户 -->
        <SupplierAccountTable
          v-if="!isModify"
          :supplier-id="supplierId"
          :parent-supplier-id="parentSupplierId"
          :is-show-account="isShowAccount"
          :is-create-account="isSupplier"
          :show-mobile-page="showMobilePage"
          :accounts-receivable="baseInfo.accountsReceivable || {}"
          :supplier-type="baseInfo.supplierType"
          is-hidden-title
          class="padding0"
          @updateData="querySupplierDetail"
          @setSensitive="setSensitive" />
        <!-- <div v-if="isSupplier" class="supplier-manage-resource">
        <div class="headerTab">
          <PlainCreateBtn :disabled="isDisabled" @click="addValue">添加收款账户</PlainCreateBtn>
        </div>
        <div class="accountContainer">
          <Title title="收款账户" font-size="16px" style="margin:10px 0 16px 0;"/>
          <accountEditTable ref="accountEdit" :type="1" :supplier-id="supplierId" />
        </div>
      </div> -->
        <!-- 地址管理 -->
        <AddressTable
          v-if="!isModify"
          :supplier-id="supplierId"
          :parent-supplier-id="parentSupplierId"
          :show-mobile-page="showMobilePage"
          :is-show-address="isShowAddress"
          :list="baseInfo.addressList || []"
          style="padding-left: 8px;"
          @updateData="querySupplierDetail"
          @add="addAddress"
          @edit="editAddress"
          @setSensitive="setSensitive" />
        <!-- 达人分成分组 -->
        <div v-if="!isModify" class="relative">
          <div class="group-title-row">
            <Title title="达人分成分组" />
            <PlainCreateBtn :disabled="isDisabled" @click="resourceAdd">创建资源组</PlainCreateBtn>
          </div>
          <div class="explain">
            <div style="display: flex;flex-wrap: nowrap;">
              <i class="el-icon-warning-outline" style="margin-top: 2px;" />
              <span>说明：结算规则将按照各资源组的规则为准。规则公式变更不会影响到已经发起或结束的结算单。资源组支持批量关联，批量关联需要上传标准文档，点击</span>
            </div>
            <export-button
              :export-api="'/admin/supplier/resource/template/export'"
              :disabled="true"
              export-name="文档"
              is-diy>
              <a class="download-template">下载文档</a>
            </export-button>
          </div>
          <ResourceGroup
            :id="supplierId"
            :resource-info="resourceInfo"
            :is-disabled="isDisabled"
            :resource-detail="supplierDetail"
            :show-mobile-page="showMobilePage"
            style="padding: 0 24px;"
            @updateResource="updateResource"
            @updateData="updateData"/>
        </div>
        <!-- 操作日志 -->
        <Title v-if="!isModify" :style="{ marginLeft: showMobilePage && '16px' }" title="操作日志" style="margin: 0 0 12px 24px;" />
        <SupplierLog v-if="!isModify" ref="supplierLogRef" :id="supplierId" :is-disabled="isDisabled" :is-update="isUpdate" style="padding: 0 24px 50px 24px;"/>
      </div>
    </div>
    <!--修改记录-->
    <ModifyRecord ref="modifyRecordRef" :id="supplierId" />
    <!--审批弹框-->
    <ApproveDialog ref="ApproveDialogRef" :is-agree="isAgree" @approveConfirm="handleApproveConfirm" />
    <!--评论-->
    <CommentDialog
      ref="supplierModifyCommentDrawer"
      :visible.sync="showComment"
      :comments-id="supplierId"
      :comment-module="COMMENT_MODULE.SUPPLIER_MODIFY"
      :get-comments-api="getSupplierModifyComments"
      :add-comment-api="supplierModifyCommentAdd"
      :is-creator="contractCodeViewStatus"
      @commentCountChange="commentCountChange"
    />
    <CreateDialog ref="createRef" is-edit @refresh="querySupplierDetail" @updateLog="isUpdate = !isUpdate" />
    <AddressDialog ref="addressDialogRef" :list="baseInfo.addressList || []" @refresh="querySupplierDetail" />
    <fixed-pagination>
      <div class="center">
        <template v-if="isSupplier">
          <el-button class="sync-btn mobile-btn-flex" type="primary" size="small" @click="goCreateClient">同步到客户</el-button>
          <el-button v-if="hasRouteAuth('medium:supplierAudit:launch') && (baseInfo.notSupplierNum || baseInfo.notCostNum)" class="small-padding" type="primary" size="small" @click="toAccount">发起结算</el-button>
          <!-- 签约内审审批同步的供应商才显示，只有旧数据有，隐藏，改成统一到右上角的编辑入口修改 -->
          <!--
          <template v-if="isFromSignUp">
            <el-button class="empty-btn-style small-padding" type="info" size="small" @click="handleModify(false)">申请修改</el-button>
            <el-button class="empty-btn-style small-padding" type="info" size="small" @click="showModifyRecord">修改记录</el-button>
          </template>
          -->
        </template>
        <template v-else-if="isModify">
          <el-button class="empty-btn-style" style="padding: 7px 16px" type="info" size="small" @click="handleComment">评论({{ commentCount }})</el-button>
          <template v-if="isApprover && isPending">
            <!-- <el-button class="empty-btn-style" type="info" size="small" @click="handleModify(true)">编辑</el-button> -->
            <el-button class="" type="primary" size="small" @click="showAuditModal(true)">同意</el-button>
            <el-button class="" type="danger" size="small" @click="showAuditModal(false)">拒绝</el-button>
          </template>
          <template v-if="isRejected && isInitiator">
            <!-- <el-button class="empty-btn-style" type="info" size="small" @click="handleModify(true)">编辑</el-button> -->
          </template>
        </template>
        <el-button class="back-btn cancel-btn-style" type="info" size="small" @click="handleBack">返回</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import {
  supplierInfo,
  resourceInfo,
  resourceAdd,
  supplierModifyDetail,
  getSupplierModifyComments,
  supplierModifyCommentAdd,
  downloadRecord
} from '@/api/supplier';
import { hasRouteAuth } from '@/utils/permission';
import accountEditTable from '@/components/SupplierComponent/supplierManageComp/accountEditTable';
import ResourceGroup from '@/components/SupplierComponent/resourceGroup';
import SupplierLog from '@/components/SupplierComponent/supplierLog';
import Title from '@/components/Title';
import AddressDialog from '../components/addressDialog';
import CreateDialog from '../create/create';
import ExportButton from '@/components/ExportButton';
import CommentDialog from '@/components/Common/comment';
import ModifyRecord from '../components/modifyRecord';
import ApproveDialog from '../components/approveDialog';
import SupplierDetailInfo from '../components/supplierDetailInfo';
import SupplierAccountTable from '../components/supplierAccountTable';
import SupplierAccountInfo from '../components/supplierAccountInfo';
import { supplierModifyAudit, supplierLogOperation } from '@/api/supplier';
import { SUPPLIER_CREATE_TYPE, SUPPLIER_DETAIL_TYPE, SUPPLIER_MODIFY_STATUS } from '@/utils/const/supplier';
import { COMMENT_MODULE } from '@/utils/const';
import OtherInfo from '../components/otherInfo';
import AddressTable from '../components/addressTable';
import { mapState } from 'vuex';

export default {
  components: {
    accountEditTable,
    ResourceGroup,
    SupplierLog,
    Title,
    CommentDialog,
    ApproveDialog,
    ModifyRecord,
    SupplierDetailInfo,
    SupplierAccountTable,
    SupplierAccountInfo,
    ExportButton,
    OtherInfo,
    AddressTable,
    CreateDialog,
    AddressDialog
  },
  data() {
    return {
      getSupplierModifyComments,
      supplierModifyCommentAdd,
      COMMENT_MODULE,
      detailType: SUPPLIER_DETAIL_TYPE.SUPPLIER,
      supplierId: null,
      baseInfo: {},
      resourceInfo: [],
      isDisabled: false, // 编辑状态无法创建资源组
      isUpdate: false,
      isOneself: null,
      isAgree: false,
      showComment: false,
      tabIndex: 0,
      commentCount: 0,
      isShowPersonal: false,
      isShowCompany: false,
      isShowSignUp: false,
      isShowAccount: false,
      isShowAddress: false,
      parentSupplierId: null,
      isFromModify: false,
      modifyId: null
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    infoTabName() {
      return this.baseInfo.supplierType === 0 ? '个人信息' : '公司信息';
    },
    canEditSupplierInfo() {
      return this.isSupplier && this.hasRouteAuth('medium:supplier:edit');
    },
    tabList() {
      const { type } = this.$route.query;
      let arr = [
        { id: 0, name: this.infoTabName },
        { id: 1, name: '账号信息' },
        { id: 2, name: '收款账户' },
        { id: 3, name: '地址管理' }
      ];
      if (!type) {
        arr = arr.concat([
          { id: 4, name: '达人分成分组' },
          { id: 5, name: '操作日志' }
        ]);
      }
      return arr;
    },
    // 公司/个人信息
    otherData() {
      const { taxpayerIdentificationNumber, idCard, remark, cooperationStatus, sex, wxCode, publishedStatus, phone, supplierType, identityNumber } = this.baseInfo;
      const arr = [
        {
          sex,
          idCard,
          wxCode,
          publishedStatus,
          personRemark: remark,
          phone,
          supplierType,
          identityNumber
        },
        {
          taxpayerIdentificationNumber,
          license: idCard,
          remark,
          wxCode,
          cooperationStatus,
          supplierType
        }
      ];
      return arr[this.baseInfo.supplierType];
    },
    supplierTabs() {
      return [{
        'id': 0,
        'name': '资源组',
        'num': 0
      }
      // {
      //   'id': 1,
      //   'name': '收款账户',
      //   'num': 0
      // }
      ];
    },
    isApprover() { // 是否为审批人
      return this.userInfo.id === this.baseInfo.approverId;
    },
    isInitiator() { // 是否为发起人
      return this.userInfo.id === this.baseInfo.initiatorId;
    },
    isSupplier() { // 供应商详情
      return this.detailType === SUPPLIER_DETAIL_TYPE.SUPPLIER;
    },
    isModify() { // 申请修改审批详情
      return this.detailType === SUPPLIER_DETAIL_TYPE.MODIFY;
    },
    isFromSignUp() {
      return this.baseInfo.source === 2;
    },
    isAutoCreate() { // 自动生成的供应商
      return this.baseInfo.createType === SUPPLIER_CREATE_TYPE.AUTO;
    },
    isPending() { // 申请审批审批中
      return this.baseInfo.approvalStatus === SUPPLIER_MODIFY_STATUS.PENDING;
    },
    isRejected() { // 申请审批未过审
      return this.baseInfo.approvalStatus === SUPPLIER_MODIFY_STATUS.REJECTED;
    },
    isCompleted() { // 申请审批已完成
      return this.baseInfo.approvalStatus === SUPPLIER_MODIFY_STATUS.COMPLETED;
    },
    contractCodeViewStatus() {
      return this.userInfo.id === this.baseInfo.createUserId || this.isApprover || this.isInitiator;
    }
  },
  created() {
    this.supplierId = Number(this.$route.params.id) || null;
    this.isOneself = Boolean(Number(this.$route.query.isOneself));
    Number(this.$route.query.type) && (this.detailType = Number(this.$route.query.type));
    this.querySupplierDetail();
    this.modifyId = this.$route.query.modifyId || '';
    this.isFromModify = !!this.$route.query.isModify;
  },
  mounted() {
    if (this.$route.query.openComment) {
      this.handleComment();
    }
  },
  beforeDestroy() {
    this.$refs['supplierModifyCommentDrawer'].closeWebSocket();
  },
  methods: {
    hasRouteAuth,
    handleDownload(data) {
      const params = {
        id: this.supplierId,
        ...data
      };
      downloadRecord(params).then(res => {
        if (res.code === 200) {
          this.isUpdate = !this.isUpdate;
        }
      });
    },
    querySupplierDetail() {
      this.isModify ? this.supplierModifyDetail() : this.supplierDetail();
      this.$refs.supplierLogRef && this.$refs.supplierLogRef.getList();
    },
    addAddress() {
      this.$refs['addressDialogRef'].init();
    },
    editAddress(data) {
      this.$refs['addressDialogRef'].init(data, true);
    },
    // 供应商详情
    supplierDetail() {
      supplierInfo(this.supplierId).then(res => {
        this.handleFormatData(res.data);
        this.commentCount = this.formatOverflowNumber(res.data.commentCount);
      }).catch(err => {
        console.error(err);
      });
    },
    // 供应商审批详情
    supplierModifyDetail() {
      supplierModifyDetail(this.supplierId).then(res => {
        this.handleFormatData(res.data);
        this.commentCount = this.formatOverflowNumber(res.data.commentCount);
        if (res.data.supplierId && this.isModify) {
          this.parentSupplierId = res.data.supplierId;
        }
      }).catch(err => {
        console.error(err);
      });
    },
    handleFormatData(data) {
      !data && (data = {});
      data.linkResource = this.formatOverflowNumber(data.linkResource);
      data.resourceList && data.resourceList.map(item => {
        item.resourceNum = this.formatOverflowNumber(item.resourceNum);
        item.total = this.formatOverflowNumber(item.total);
        if (!item.items) item.items = [];
        return item;
      });
      data.accountsInfoList && data.accountsInfoList.forEach((item, index) => {
        item.accountsInfo && item.accountsInfo.dynamicKey && item.accountsInfo.dynamicKey.forEach(dynamicData => {
          if (dynamicData.inputType === 1 || dynamicData.options) {
            const result = dynamicData.options && dynamicData.options.filter(option => Number(dynamicData.value) === Number(option.value));
            item.accountsInfo[dynamicData.name] = result && result.length && (dynamicData.value = result[0].label) || dynamicData.value;
            if (dynamicData['_value']) {
              const originalResult = dynamicData.options && dynamicData.options.filter(option => Number(dynamicData['_value']) === Number(option.value));
              item.accountsInfo[`_${dynamicData.name}`] = originalResult.length && (dynamicData['_value'] = originalResult[0].label) || dynamicData['_value'];
            }
          } else {
            item.accountsInfo[dynamicData.name] = dynamicData.value;
            dynamicData['_value'] && (item.accountsInfo[`_${dynamicData.name}`] = dynamicData['_value']);
          }
        });
        item.priceInfo && item.priceInfo.dynamicKey && item.priceInfo.dynamicKey.forEach(dynamicData => {
          if (dynamicData.inputType === 1 || dynamicData.options) {
            const result = dynamicData.options && dynamicData.options.filter(option => Number(dynamicData.value) === Number(option.value));
            item.priceInfo[dynamicData.name] = result && result.length && (dynamicData.value = result[0].label) || dynamicData.value;
            if (dynamicData['_value']) {
              const originalResult = dynamicData.options && dynamicData.options.filter(option => Number(dynamicData['_value']) === Number(option.value));
              item.priceInfo[`_${dynamicData.name}`] = originalResult.length && (dynamicData['_value'] = originalResult[0].label) || dynamicData['_value'];
            }
          } else {
            item.priceInfo[dynamicData.name] = dynamicData.value;
            dynamicData['_value'] && (item.priceInfo[`_${dynamicData.name}`] = dynamicData['_value']);
          }
        });
        if (item.contractInfo.signStartDate) {
          item.contractInfo.signDate = [item.contractInfo.signStartDate, item.contractInfo.signEndDate];
        }
      });
      this.baseInfo = data;
      this.resourceInfo = data.resourceList;
      if (this.isFromModify) {
        this.$nextTick(() => {
          this.edit(this.baseInfo, true);
        });
      }
    },
    formatOverflowNumber(val) {
      const valNum = Number(val);
      if (!isNaN(valNum)) {
        return valNum > 99 ? '99+' : valNum;
      }
      return val;
    },
    addValue() {
      this.$refs.accountEdit.addValue();
    },
    edit(data, isModify = false) {
      this.$refs['createRef'].init(data, isModify);
    },
    // 删除资源组后刷新
    updateResource() {
      this.supplierDetail();
      this.isUpdate = !this.isUpdate;
    },
    // 刷新修改的单个资源组数据
    updateData(val) {
      this.resourceDetail(val);
      this.isUpdate = !this.isUpdate;
    },
    resourceDetail(id) {
      resourceInfo(id).then(res => {
        if (!res.data.items) res.data.items = [];
        this.resourceInfo = this.resourceInfo.map(item => item.id === res.data.id ? res.data : item);
      }).catch(err => {
        console.error(err);
      });
    },
    resourceAdd() {
      if (this.isDisabled) return false;
      if (!this.hasRouteAuth('medium:supplier:resourceEdit')) {
        this.$confirm('您暂无供应商资源组创建权限，请到用户管理-权限管理进行设置或联系管理员', '', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).catch(() => {
          return false;
        });
      } else {
        resourceAdd({ supplierId: this.supplierId }).then(res => {
          this.$message.success('创建成功');
          this.supplierDetail();
          this.isUpdate = !this.isUpdate;
        }).catch(err => {
          console.error(err);
        });
      }
    },
    isEdit(val) { // 编辑状态无法创建资源组，对资源组进行操作
      this.isDisabled = val;
    },
    // 发起结算
    toAccount() {
      this.$router.push({
        name: 'supplierCreate',
        query: { id: this.supplierId, from: 'saleSupplier' }
      });
    },
    // 申请修改
    handleModify(isReModify = false) {
      if (this.supplierId) {
        const params = {
          type: this.$route.query.type ? 2 : 1,
          channelId: this.supplierId
        };
        supplierLogOperation(params).catch(err => console.error(err));
      }
      const query = { isModify: true };
      if (isReModify) {
        query.id = this.baseInfo.supplierId;
        query.modifyId = this.supplierId;
      } else {
        query.id = this.supplierId;
      }
      this.$router.push({
        name: 'supplierManageDetail',
        query
      });
    },
    // 修改记录
    showModifyRecord() {
      this.$refs['modifyRecordRef'].initRecord();
    },
    handleBack() {
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({
          name: 'supplierManage'
        });
      }
    },
    commentCountChange(isAdd = true) {
      this.commentCount !== '99+' && isAdd ? this.commentCount++ : this.commentCount--;
    },
    goCreateClient() {
      if (!hasRouteAuth('crm:customer:add')) {
        this.$message.error('您暂无新增客户权限，请联系管理员');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'createCustomer',
        query: { supplierId: this.supplierId }
      });
      window.open(routeUrl.href, '_blank');
    },
    async handleComment() {
      try {
        this.$refs['supplierModifyCommentDrawer'].initWebSocket();
        await this.$refs['supplierModifyCommentDrawer'].queryComments();
        this.showComment = true;
        this.$nextTick(() => {
          this.$refs['supplierModifyCommentDrawer'].initDrawerContentHeight();
        });
        const timer = setTimeout(() => {
          this.$refs['supplierModifyCommentDrawer'].scrollToBottom(true);
          clearTimeout(timer);
        }, 200);
      } catch (e) {
        this.showComment = false;
      }
    },
    showAuditModal(type) {
      this.isAgree = type;
      this.$refs['ApproveDialogRef'].dialogVisible = true;
    },
    handleApproveConfirm(reason) {
      const params = Object.create(null);
      params.id = this.supplierId;
      params.status = this.isAgree ? 1 : 0;
      params.reason = reason.replace(/[\r\n]/g, '');
      supplierModifyAudit(params).then(() => {
        this.$message.success('操作成功');
        this.querySupplierDetail();
      }).catch(() => {});
    },
    setSensitive: _.debounce(function(key) {
      this[key] = true;
      this.$nextTick(() => {
        this.$refs.supplierLogRef && this.$refs.supplierLogRef.getList();
      });
    }, 500)
  }
};
</script>
<style lang="scss" scoped>
.supplier-manage-detail {
  .sync-btn {
    background-color: #fff;
    color: #406EFF;
    padding: 0 12px;
  }
  .supplier-info-content {
    background-color: #fff;
    margin: 16px 16px 0;
    min-height: calc(100vh - 80px);
    padding-bottom: 55px;
    &.is-mobile {
      margin: 0;
    }
    .list-tab-box {
      padding: 0 24px;
    }
    &::v-deep {
      .account-info-container {
        padding-top: 0;
      }
    }
  }
  .group-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
    padding-left: 24px;
  }
  .headerTab{
    position: absolute;
    top: -2px;
    right: 24px;
    .create-resource-btn {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      // width:120px;
      height:32px;
      background:rgba(64,110,255,1);
      border-radius:4px;
      font-size:14px;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:14px;
    }
    .forbid-btn {
      background:rgba(64,110,255,1);
      opacity: 0.6;
      cursor: not-allowed;
    }
    &.header-tab-mobile {
      position: relative;
      top: 12px;
      padding-bottom: 12px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .supplier-manage-resource {
    margin: 8px 16px 10px;
    background: #fff;
    padding-top: 5px;
  }
  .explain {
    text-align: left;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    padding: 8px 24px;
    margin: 12px 24px 16px 24px;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    background: #F9F9F9;
    .hint {
      display: inline-block;
      width: 14px;
      height: 14px;
      line-height: 1.1;
      text-align: center;
      background: transparent;
      border: 1px solid #999;
      border-radius: 50%;
      opacity: 1;
      color: #999;
      margin-right: 5px;
    }
    .download-template {
      font-size: 12px;
      font-weight: 500;
      padding-top: 0;
      color: #406EFF;
      text-decoration:underline;
    }
  }
  &.mobile-detail-wrap {
    &::v-deep {
      .supplier-account-container, .account-info-container, .supplier-log, .resource-group {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      .explain {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }
      .group-title-row {
        padding-left: 0;
        padding-right: 16px;
      }
      .address-table {
        padding-left: 0 !important;
        margin-right: 16px !important;
      }
      .relative {
        .title-head {
          margin-left: 16px !important;
        }
      }
      .resource-list-header-mobile {
        .title-head {
          margin-left: 0 !important;
        }
      }
      .supplier-info-container, .other-info-form, .account-info-container {
      .el-col {
        .el-form-item {
          border-right: none;
        }
      }
    }
    }
    ::v-deep .supplier-account-container {
      .create-btn {
        position: relative;
        top: 0;
        margin-bottom: 12px;
      }
    }
    ::v-deep .operating-record {
      .el-timeline-item__wrapper {
        .el-timeline-item__content {
          overflow: auto;
          .ellipsis {
            overflow: unset;
          }
          .detail {
            width: fit-content;
          }
        }
      }
    }
  }
  .mobile-pagination {
    .cancel-btn-style {
      flex: unset;
    }
  }
}
.accountContainer {
  margin-bottom: 16px;
  padding: 0 24px;
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  &:hover {
    background: #406EFF;
    color: #fff;
  }
}
.small-padding {
  padding-left: 12px;
  padding-right: 12px;
}
</style>
